<template>
  <div class="Doc">
    <header class="header">腾讯面试-张亮</header>
    <CTable :tableData="tableData" :pwidth="pwidth" @needMoreData="handlerMoreData" :is-loadding="isLoadding" :table-length="tableLength"></CTable>
    <section :style="styleObj" class="footer">
      数据加载中
    </section>
  </div>
</template>

<script>
  import CTable from '../DocTable3/index';
  import TableData from '~/Api/Models/TableData2';
  import CButton from '~/components/CButton';
  import './style.less';

  const take = 100;
  const columns = 10;
  const columnsW = 100;
  const interval = 100;

  export default {
    name: 'Doc',
    data: function() {
      return {
        tableData: {},
        pwidth: '',
        currentDataPos: 0,
        isLoadding: false,
        tableLength: 0,
      };
    },
    created() {
      // 获取数据并进行填充
      this.getData();
    },
    computed: {
      styleObj: function() {
        return {
          opacity: this.isLoadding ? 1 : 0,
          bottom: (this.isLoadding ? 0 : -30) + 'px',
        };
      },
    },
    methods: {
      async getData() {
        if (this.isLoadding) return;
        this.isLoadding = true;
        const data = await TableData.getDataList(0, take, columns, 0);
        this.tableData = data;
        this.currentDataPos += take;
        // 根据数据计算表格宽度
        this.pwidth = columnsW * columns + 41+ 'px';
        this.tableLength = this.tableData.rows.length;

        this.isLoadding = false;
      },
      handlerNewSheet() {
        alert('new');
      },
      async handlerMoreData() {
        if (this.isLoadding) return;
        this.isLoadding = true;
        const data = await TableData.getDataList(this.currentDataPos, take, columns, interval);
        data.rows.map(item => {
          this.tableData.rows.push(item);
        });
        console.log(this.tableData.rows);
        this.currentDataPos += take;
        this.tableLength = this.tableData.rows.length;
        this.isLoadding = false;
      },
    },
    components: {
      CTable, CButton,
    },
  };
</script>

<style scoped lang="less">

</style>
